<template>
	<div id="PermissionAndUsers">
		<el-form :inline="true" ref="form" :model="form" label-width="80px">
			<div>
				<el-form-item label="用户">
					<el-input v-model="search"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="searchs()" plain>搜索</el-button>
					<el-button @click="showAll()" plain>显示全部</el-button>
					<el-button @click="addVisible=true" plain>添加</el-button>
				</el-form-item>
			</div>
		</el-form>
		<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
			<el-table-column prop="Number" label="编号" width="60" type="index">
			</el-table-column>
			<el-table-column prop="username" label="用户">
			</el-table-column>
			<el-table-column prop="roleName" label="角色类型" :filters="opition" :filter-method="filterTag"
				filter-placement="bottom-end">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="text" @click="del(scope.row)" size="small">删除</el-button>
					<el-button type="text" @click="edit(scope.$index,scope.row)" size="small">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
			</el-pagination>
		</div>
		<el-dialog title="添加用户" :visible.sync="addVisible" width="30%" :modal-append-to-body="false">
			<el-form ref="form" :model="form" :rules="rules" label-width="150px">
				<el-form-item label="账号:" prop="username">
					<el-input v-model="form.username" placeholder="请输入账号" style="width: 230px;"></el-input>
				</el-form-item>
				<el-form-item label="密码:" prop="password">
					<el-input type="password" v-model="form.password" placeholder="密码默认123456" style="width: 230px;">
					</el-input>
				</el-form-item>
				<el-form-item label="权限:" prop="roleId">
					<el-select v-model="form.roleId">
						<el-option v-for="item in opition" :key="item.value" :label="item.text" :value="item.roleId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button @click=save()>保存</el-button>
					<el-button @click="back()">关闭</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog title="更新用户" :visible.sync="addVisible2" width="30%" :modal-append-to-body="false">
			<el-form ref="form" :model="form" label-width="150px">
				<el-form-item label="账号:">
					<el-input v-model="resData.username" style="width: 230px;" disabled></el-input>
				</el-form-item>
				<el-form-item label="密码:">
					<el-input type="password" v-model="resData.password" style="width: 230px;"></el-input>
				</el-form-item>
				<el-form-item label="权限:">
					<el-select v-model="resData.roleId">
						<el-option v-for="item in opition" :key="item.value" :label="item.text" :value="item.roleId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button @click="update()">更新</el-button>
					<el-button @click="back2()">关闭</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				juese: '',
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				addVisible: false,
				addVisible2: false,
				form: {},
				value: '',
				tableData: [],
				resData: [],
				opition: [],
				search: "",
				tableData1: [],
				same: [],
				roleId: "",
				index: "",
				rules: {
					username: [
						{ required: true, message: '请输入客户名称', trigger: 'blur' },
						{
							validator: this.$validator.checkMaxChars,
							len: 20
						}
					], password: [{
						validator: this.$validator.checkMaxChars,
						len: 12
					}], roleId: [{
						required: true, message: '请选择权限', trigger: 'blur'
					}]
				}
			}
		},
		created() {
			let nowname = localStorage.getItem("reloname");
			this.juese = nowname;
		},
		mounted() {
			this.pageshow();
		},
		methods: {
			pageshow() {
				this.$http.get('/sys-user/show').then(response => {
					this.tableData = response.data;
					this.tableData1 = response.data;
				}).catch(function (error) {
					console.log(error);
				});

				this.$http.get('/sys-user/roles').then(response => {
					this.opition = response.data;
				}).catch(function (error) {
					console.log(error);
				});
			},
			filterTag(value, row) {
				return row.roleName === value;
			},
			filterHandler(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			},
			searchs() {
				if (this.search != "") {
					this.tableData = this.tableData1.filter(item => (item.username.indexOf(this.search) != -1));
				}
			},
			showAll() {
				this.tableData = this.tableData1;
			},
			back() {
				this.addVisible = false;
			},
			back2() {
				this.addVisible2 = false;
			},
			save() {
				this.$refs['form'].validate((valid) => {
					if (valid) {
						this.$http.get('/sys-user/save', {
							params: {
								username: this.form.username,
								password: this.form.password,
								roleId: this.form.roleId
							}
						}).then(response => {
							if (response.data.code == 0) {
								this.pageshow();
								this.addVisible = false;
								this.form = {};
								this.$notify({
									title: response.data.msg,
									message: '☺',
									type: 'success'
								});
							} else {
								this.$notify.error({
									title: response.data.msg,
									message: '😭',
									type: 'error'
								});
							}
						}).catch(function (error) {
							console.log(error);
						});
					} else {
						this.$message({
							message: '您还有未完善的选项',
							type: 'warning'
						})
						return false;
					}
				});
			},
			del(row) {
				if (localStorage.getItem('myToken') === row.username) {
					this.$notify.error({
						title: '可不能把自己给删了哟',
						message: '😡',
						type: 'error'
					});
					return;
				}
				this.$http.get('/sys-user/del', {
					params: {
						id: row.id
					}
				}).then(response => {
					if (response.data.code == 0) {
						this.pageshow();
						this.$notify({
							title: response.data.msg,
							message: '☺',
							type: 'success'
						});
					} else {
						this.$notify.error({
							title: response.data.msg,
							message: '😭',
							type: 'error'
						});
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			edit(index, row) {
				this.index = index;
				this.resData = row;
				this.addVisible2 = true;
			},
			update() {
				this.$http.get('/sys-user/updateByid', {
					params: {
						id: this.resData.id,
						username: this.resData.username,
						password: this.resData.password,
						roleId: this.resData.roleId
					}
				}).then(response => {
					this.pageshow();
					if (response.data.code == 0) {
						this.same.length = 0;
						this.addVisible2 = false;
						this.$notify({
							title: response.data.msg,
							message: '☺',
							type: 'success'
						});
					} else {
						this.$notify.error({
							title: response.data.msg,
							message: '😭',
							type: error
						});
					}
				}).catch(function (error) {
					console.log(error);
				});
			}
		}
	}
</script>

<style>
</style>